<template>
  <div class="financialdetail">
    <p class="jsdetaillist">结算单明细列表</p>

    <!-- 搜索栏 -->
    <div class="searchtable">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="结算状态">
          <el-select v-model="formInline.status" placeholder="请选择">
            <el-option label="未结算" value="0" />
            <el-option label="已结算" value="1" />
            <el-option label="全部" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="结算时间">
          <el-date-picker
            v-model="formInline.statementDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" >搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="btn">
      <el-button type="primary" class="" @click="toggleSelection()"
        >全选</el-button
      >
      <el-button type="primary" class="finish">生成结算单</el-button>
    </div>

    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="statementId" label="结算单号"> </el-table-column>
        <el-table-column prop="supplierName" label="供应商名称">
        </el-table-column>
        <el-table-column prop="goodsTypeNum" label="品种数量">
        </el-table-column>
        <el-table-column prop="totalWeight" label="总重量(kg)">
        </el-table-column>
        <el-table-column prop="totalStatementPrice" label="结算金额">
        </el-table-column>
        <el-table-column prop="checkDate" label="收货日期"> </el-table-column>
        <el-table-column prop="statementDate" label="结算日期">
        </el-table-column>
        <el-table-column prop="status" label="状态">
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary">明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        status: "",
        statementDate: ""
      },
      tableData: [
          {
              statementId:131454,
              supplierName:"番禺供应商",
              goodsTypeNum:1345,
              totalWeight:1647,
              totalStatementPrice:1868,
              checkDate:"2019-11-22",
              statementDate:"2019-11-22",
              status:"未结算"
          },
          {
              statementId:131784,
              supplierName:"番禺供应商",
              goodsTypeNum:135,
              totalWeight:167,
              totalStatementPrice:18698,
              checkDate:"2019-11-22",
              statementDate:"2019-11-22",
              status:"未结算"
          }
      ],
      multipleTable: [],
    };
  },
  mounted() {
  },
  methods: {
    // 让列表全选
    toggleSelection() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    // 选择按钮时触发
    handleSelectionChange(val) {
      console.log(val);
    },
    // 当前第几页
    handleCurrentChange(val) {
      console.log(val);
    }
  }
};
</script>

<style lang="scss" scoped>
.financialdetail {
  padding: 20px 20px;
  .jsdetaillist {
    font-size: 22px;
    margin-bottom: 60px;
  }
  .btn {
    text-align: right;
    margin-bottom: 30px;
    .account {
      margin-left: 10px;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
